<template>
	<view id="app">
		<canvas id="myCanvas" type="2d" />
		<view class="content">我应该在 canvas 最上层，不该被矩形挡住</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.drawCanvas();
		},
		methods: {
			/**
			 * canvas 的单位都是 px
			 * 默认尺寸 300px*150px
			 * 先画的层级较低，后画的层级较高
			 * 超出画布的部分不会显示
			 * **/
			drawCanvas() {
				wx.createSelectorQuery()
					.select('#myCanvas') // 在 WXML 中填入的 id
					.node(({
						node: canvas
					}) => {
						const ctx = canvas.getContext('2d');

						ctx.strokeStyle = "rgba(0, 128, 0,1)"; 
						ctx.strokeRect(0, 0, 75, 75);
						ctx.fillStyle = "rgba(0, 128, 0,1)";
						ctx.fillRect(0, 0, 75, 75);

						ctx.fillStyle = "red";// 设置的方式从 ctx.setFillStyle("red") 改成了 ctx.fillStyle = "red";
						ctx.fillRect(50, 50, 75, 75);

						ctx.fillStyle = "yellow";
						ctx.fillRect(100, 100, 75, 75);

						// ctx.draw(); //新版 canvas 不需要调用 draw()
					})
					.exec()
			}
		}
	}
</script>

<style>
	#app {
		position: relative;
	}

	canvas {
		position: absolute;
		z-index: 0;
		background-color: lightblue;
	}

	.content {
		position: absolute;
		z-index: 1;
	}
</style>
